<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.8/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <table class="layui-hide" id="ID-table-demo-data"></table>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.8/dist/layui.js"></script>
    <script>
        layui.use('table', function () {
            var table = layui.table;

            // 已知数据渲染
            var inst = table.render({
                elem: '#ID-table-demo-data',
                toolbar: 'default',
                height: 315,
                cols: [[ //标题栏

                    { field: 'username', title: '用户', width: 150 },
                    { field: 'age', title: '年龄', width: 150 },
                    { field: 'sex', title: '性别', width: 150 },


                ]],
                data: [{ // 赋值已知数据

                    "username": "张三1",

                    "age": "18",
                    "sex": "男",

                }],
                //skin: 'line', // 表格风格
                //even: true,
                page: true, // 是否显示分页
                limits: [5, 10, 15],
                limit: 5 // 每页默认显示的数量
            });
        });





    </script>

</body>

</html>